<template>
  <a-row class="login">
    <a-col :span="8" :offset="8" class="login-main">
      <h1 style="text-align: center">
        <rocket-two-tone/>&nbsp;12306售票系统
      </h1>
      <a-form
          :model="loginForm"
          :name="'basic'"
          autocapitalize="off"
      >
        <a-form-item
            label=""
            name="mobile"
            :rules="[{required: true, message: '请输入用户名!'}]">
          <a-input v-model:value="loginForm.mobile" placeholder="手机号"/>
        </a-form-item>
        <a-form-item
            label=""
            name="code"
            :rules="[{required: true, message: '请输入验证码!'}]">
          <a-input v-model:value="loginForm.code">
            <template #addonAfter>
              <a @click="sendCode">获取验证码</a>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="login" block>登录</a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>


<script>
import {defineComponent, reactive} from 'vue';

export default defineComponent({
  setup() {
    const loginForm = reactive({
      mobile: '',
      code: '',
      remember: true,
    });
    const sendCode = values => {
      console.log('Success:', values);
    };
    const login = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    return {
      loginForm,
      login,
      sendCode,
    };
  },
});
</script>

<style>
.login-main {
  margin-top: 100px;
  border: 2px solid grey;
  padding: 30px 30px 20px;
  border-radius: 10px;
  background-color: #fcfcfc;
}

.login-main h1 {
  font-size: 25px;
  font-weight: bold;
}
</style>
